<template>
  <div class="doubuleCage">
    <!-- 四个输送台 -->
    <div
      class="titleName"
      @click="handelrDataShow('A44')"
      :style="{ left: '150px', top: '115px' }"
      v-if="A44.length != 0"
    >
      {{ A44.length }}
    </div>
    <div
      class="titleName"
      @click="handelrDataShow('A441')"
      :style="{ left: '150px', top: '205px' }"
      v-if="A441.length != 0"
    >
      {{ A441.length }}
    </div>
    <div
      class="titleName"
      @click="handelrDataShow('A442')"
      :style="{ left: '150px', top: '295px' }"
      v-if="A442.length != 0"
    >
      {{ A442.length }}
    </div>
    <div
      class="titleName"
      @click="handelrDataShow('A443')"
      :style="{ left: '150px', top: '340px' }"
      v-if="A443.length != 0"
    >
      {{ A443.length }}
    </div>
    <!-- 六个小车 -->
    <div
      class="cat_number"
      v-for="item in catBList"
      :key="item.id"
      :style="{ left: item.left, top: item.top }"
      @click="handelrDataShow(item.name)"
    >
      {{ vm[item.name].length }}
    </div>
    <!-- 两个笼子 -->
    <div
      class="cage_number"
      v-for="item in dobuleCageList"
      :key="item.id"
      :style="{ left: item.left , top: item.top }"
      @click="handelrDataShow(item.name)"
    >
      {{ vm[item.name].length }}
    </div>
    <el-dialog
      title="玻璃明细"
      :visible.sync="dialogVisibleEdg"
      :header-cell-style="{ 'text-align': 'center' }"
      width="60%"
    >
      <glassTable :tableData="showTableData" @updateTable="updateTable" />
    </el-dialog>
  </div>
</template>

<script>
import { catBList, dobuleCageList } from "../config/viewLocation";
import glassTable from "@/views/components/production/glassTable.vue";
import mixin from "../mixin/index";
export default {
  components: {
    glassTable,
  },
  mixins: [mixin],
  data() {
    return {
      catBList,
      dobuleCageList,
      vm: this,
      dialogVisibleEdg: false,
      showTableData: [],
      updateKey: "",
    };
  },
  methods: {
    updateTable() {
      this.showData = this[this.updateKey];
    },
    handelrDataShow(data) {
      this.updateKey = data;
      this.showTableData = this[data];
      this.dialogVisibleEdg = true;
    },
  },
};
</script>

<style lang="less" scoped>
.doubuleCage {
  position: relative;
  width: 100%;
  height: 100%;
  .titleName {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column-reverse;
    margin-left: 30px;
    background-color: #23a8f2;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  .cat_number {
    position: absolute;
    background-color: #fff;
    color: #0078d8;
    width: 60px;
    height: 25px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }
  .cage_number {
    position: absolute;
    background-color: #fff;
    color: #0078d8;
    width: 100px;
    height: 25px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }
}
</style>
